<template>
    <div>
        <div class="input-box">
            <span @click="add">新增</span>
        </div>
        <div class="summary">
            <span>全部任务({{ store.tasklist.length }})</span>
            <span>已完成({{ store.tasklist.length - store.unFinishedCount }})</span>
            <span class="unfinished">未完成({{ store.unFinishedCount }})</span>
        </div>
        <div class="tasklist">
            <h1>{{ title }}</h1>
            <div :class="{ task: true, unfinished: !item.status }" v-for="(item, index) in tasklist" :key="index">
                <input :checked="item.status" type="checkbox" @click="change(item.id)" />
                <span>{{ item.name }}</span>
                <span @click="del(item.id)">删除</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useTasklistStore } from "../stores/tasklist";
import { storeToRefs } from "pinia";
import { ref } from "vue";
// 导入vue3useRouter钩子函数
import { useRouter } from "vue-router";

var store = useTasklistStore();
var $router = useRouter();
var inputText = ref('')

var { tasklist, title, changeStatus, deleteTask } = storeToRefs(store);

var change = (id) => {
    store.changeStatus(id); //调用仓库中的方法changeStatus,更改任务状态
};
var del = (id) => {
    store.deleteTask(id); //调用仓库中的方法deleteTask,删除任务
};
var add = () => {
    $router.push('/inputBox');
};
</script>
<style scoped>
.input-box {
    display: flex;
    align-items: center;
    padding: 10px;
}

.input-box input {
    height: 40px;
    flex: 1;
    border: 1px solid #ccc;
    outline: none;
    padding-left: 20px;
    border-radius: 5px;
}

.input-box span {
    width: 80px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    color: rgb(33, 146, 216);
}

.summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.summary span {
    background-color: #2192d8;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 6px;
    padding: 0 20px;
}

.summary span.unfinished {
    background-color: red;
}

.tasklist .task {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: rgb(33, 146, 216);
    color: white;
    margin: 10px;
}

.tasklist .task.unfinished {
    background-color: red;
}
</style>